<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="日期" width="180">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column label="姓名" width="180">
      <template slot-scope="scope">
        <div>{{ scope.row.name }}</div>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
        >编辑
        </el-button
        >
        <el-button
            style="margin-left: 10px"
            slot="reference"
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >删除
        </el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "List",
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
      ],
    };
  },
  computed: {
    ...mapState(["adminMessage"])
  },
  methods: {
    async fetch() {
      const res = await this.$http.get("admin/list");
      console.log(res.data);
      this.tableData = res.data;
    },
    handleEdit(index, row) {
      console.log(index, row);
      if (this.adminMessage.authoritylever !== 2) {
        return this.$message({
          type: "error",
          message: "您没有权限编辑该用户!"
        })
      }
      this.$router.push(`/admin/message/${row._id}`)
    },
    async handleDelete(index, row) {
      console.log(index, row._id);
      this.$confirm("您将删除此用户,是否确认!", "警告", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http.post(`admin/delete/${row._id}`).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.fetch();
        }).catch((err) => {
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  },
  mounted() {
    this.fetch();
  },
};
</script>

<style scoped>
</style>